<template>
  <view>
    <view @tap="toDetails" class=" flex-row houseList">
      <view class="flex-grow-0 indexImgPath">
        <image class="img" :src="item.IndexImagePath"></image>
        <image mode="widthFix" v-if="item.videoUrl" class="icon-play" src="/static/video-play.png"></image>
      </view>
      <view class="flex-grow-1">
        <view class="item-info-box">
          <view class="item-title">{{item.titleDesc}}</view>
          <view style="margin-top: 10upx">
            <text>{{item.quxian}}</text>
            <text class="line"> | </text>
            <text>{{item.Community}}</text>
          </view>
          <view style="font-size:24upx">
            <text style="color:#f63800">
              <text style="font-size:30upx; font-weight: bold">{{item.totalPrice}}</text><text>万</text>
            </text>
            <text class="line"> | </text>
            <text>{{item.jifang}}</text>
            <text class="line"> | </text>
            <text>{{item.AreaStr}}㎡</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: "HouseList",
    data(){
      return {
        title:'llll'
      }
    },
    props:{
      item:{
        type:Object,
        default:{}
      }
    },
    methods:{
      toDetails(){
        this.$emit('toDetails',this.item.id,this.item.Community)
      }
    }
    // url="/pages/houseDetail/houseDetails?id={{item.id}}&title={{item.Community}}"
  }
</script>

<style scoped>

  .houseList {
    padding: 22upx;
    background: #fff;
    border-bottom: 1upx solid #f2f2f2;
  }
  .houseList:active{
    opacity: .8;
  }
  .houseList .indexImgPath {
    width: 220upx;
    height: 166upx;
    position: relative;
    overflow: hidden;
  }
  .houseList .indexImgPath .img {
    width: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .houseList .indexImgPath .icon-play {
    position: absolute;
    width: 45upx;
    height: 45upx;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .houseList .item-info-box {
    padding-left: 20upx;
    font-size: 24upx;
    color: #686b72;
  }
  .houseList .item-info-box .line {
    color: #e8e8e8;
  }
  .houseList .item-title {
    font-size: 30upx;
    color: #000000;
    line-height: 40upx;
  }
  .houseList .item-desc {
    font-size: 24upx;
    color: #777;
  }
  .houseList .item-desc1 {
    font-size: 24upx;
    color: #777;
  }
  .houseList .totalPrice {
    font-size: 30upx;
    color: #fa3700;
  }
</style>